<template>
<Card>
  <Row :gutter="15">
    <i-col span="6">
      <Card>
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>&nbsp;App
        </p>
        <ul class="list">
          <li v-for="item in data5" :key="item.Id" @click="itemClicked(item)">
            <Icon type="document-text"></Icon> &nbsp;{{item.channel}}
          </li>
        </ul>
      </Card>
    </i-col>
    <i-col span="18">
      <Card>
        <Row slot="title">
          <Col span="12">
          <p>
            <Icon type="ios-film-outline"></Icon>&nbsp;版本管理 ({{temp.channel}})
          </p>
          </Col>
          <!-- <Col span="12"><Button style="float: right" size="small" type="primary" @click="updateSfDesc">保存</Button></Col> -->
        </Row>
        <Row>
          <Col span="24">
          <dtable add :dataAll="tableData" :columns="columns" @refresh="getVersions(temp)" @add="addClicked"></dtable>
          </Col>
        </Row>

      </Card>
    </i-col>
  </Row>
  <Modal v-model="addFlag" :title="title" @on-ok="okClicked" @on-cancel="cancelClicked">
    <Form ref="updateForm" :model="formItem" :label-width="80" :rules="ruleInline">
      <FormItem label="Channel" prop="channel">
        <Input v-model="formItem.channel" placeholder="Channel"></Input>
      </FormItem>
      <FormItem label="Package"  prop="package">
        <Input v-model="formItem.package" placeholder="com.constream_cloud.lzqysoft"></Input>
      </FormItem>
      <FormItem label="版本号" prop="version_code">
        <Input v-model.number="formItem.version_code" placeholder="10"></Input>
      </FormItem>
      <FormItem label="更新内容" >
        <Input v-model="formItem.content" placeholder="app变动"></Input>
      </FormItem>
      <FormItem label="apk MD5"  prop="md5">
        <Input v-model="formItem.md5" placeholder="apk文件md5值"></Input>
      </FormItem>
      <FormItem label="版本名"  prop="version_name">
        <Input v-model="formItem.version_name" placeholder="1.0"></Input>
      </FormItem>
      <FormItem label="下载地址"  prop="url">
        <Input v-model="formItem.url" disabled placeholder="apk下载地址"></Input>
      </FormItem>
      <FormItem>
         <Upload ref="upload" :on-success="handleSuccess" :show-upload-list="false" :format="['apk']" :max-size="102400" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :on-remove="handleRemove" :before-upload="handleBeforeUpload" :action="actionUrl">
          <Button type="ghost" icon="ios-cloud-upload-outline">apk文件上传</Button>
        </Upload>
      </FormItem>
      
    </Form>
   
  </Modal>
</Card>
</template>

<script>
import moment from 'moment';
import dtable from '../../components/table/btable.vue'; // 采用biztable
import { SERVER_CPT_URL, FS_HOST } from '@/api/config';
export default {
    name: 'AppVersion',
    data () {
      return {
        addFlag: false,
        data5: [],
        tableData: [],
        formItem: {
          channel: '',
          package: '',
          version_code: '',
          url: '',
          content: '',
          md5: '',
          size: '',
          version_name: ''
      },
        ruleInline: {
          channel: [
            {
                required: true,
                message: '必填',
                trigger: 'blur'
            }
        ],
          package: [
            {
                required: true,
                message: '必填',
                trigger: 'blur'
            }
        ],
          version_code: [
            {
                required: true,
                message: '必填',
                type: 'number',
                trigger: 'blur'
            },
           { type: 'number', min: 10, message: '必须是数值', trigger: 'change' }
        ],
          url: [
            {
                required: true,
                message: '必填',
                trigger: 'change'
            }
        ],
          md5: [
            {
                required: true,
                message: '必填',
                trigger: 'blur'
            }
        ],
          version_name: [
            {
                required: true,
                message: '必填',
                trigger: 'blur'
            }
        ],
          size: [
            {
                required: true,
                message: '必填',
                trigger: 'blur'
            }
        ]
      },
        temp: {},
        columns: [
          {
              title: ' ',
              type: 'index',
              width: 50
          },
          {
              title: 'channel',
              key: 'Channel'
          },
          {
              title: 'package',
              key: 'Package'
          },
          {
              title: '版本号',
              key: 'VersionCode'
          },
          {
              title: '版本编码',
              key: 'VersionName'
          },
          {
              title: 'MD5',
              key: 'Md5'
          },
          {
              title: '发布时间',
              key: 'Ctime',
              render: (h, { row }) => {
              return h(
              'span',
              {},
              moment(row['Ctime']).format('YYYY-MM-DD HH:mm')
            )
          }
          }
      ]
    }
  },
    components: {
      dtable
  },
    computed: {
      title () {
        return `${this.temp.channel}发布新版本`
    },
      state () {
        return this.$store.state.app
    },
      actionUrl () {
        return SERVER_CPT_URL + '/upload/FileUpload?token=' + this.state.token
    }
  },
    methods: {
      okClicked () {
        this.$refs['updateForm'].validate(valid => {
          if (valid) {
            this.UpdateApp(this.formItem)
        } else {

        }
      })
    },
      cancelClicked () {
        this.$refs['updateForm'].resetFields()
    },
      handleBeforeUpload () {},
      handleSuccess (res, file) {
      // console.log(res)
        if (res.code == 0) {
          this.$Message.success('上传成功！')
        this.formItem.size = res.jdata['size']
        this.formItem.url = FS_HOST + res.jdata['fid']
      }
    },
      handleFormatError (file) {
        this.$Message.error('文件类型错误！')
    },
      handleRemove () {},
      handleMaxSize (file) {
        this.$Message.error('文件过大！')
    },
      addClicked () {
        console.log('add')
      this.addFlag = true
    },
      getAppChannel () {
        this.$api.GetApps().then(res => {
          if (res.code == 0) {
            this.data5 = res.Data
          if (this.data5.length > 0) {
              this.temp = this.data5[0]
            this.formItem.channel = this.temp.channel
              this.formItem.package = this.temp.package
              this.getVersions(this.temp)
          }
        }
      })
    },
      itemClicked (item) {
      // console.log(item)
        this.temp = item
      this.formItem.channel = this.temp.channel
        this.formItem.package = this.temp.package
        this.getVersions(item)
     
    },
      getVersions (item) {
        this.$api.GetAppVersion(item).then(res => {
          if (res.code == 0) {
            this.tableData = res.Data
        }
      })
    },
      UpdateApp (info) {
        this.$api.UpdateApp(info).then(res => {
          if (res.code == 0) {
            this.addFlag = false
            this.$Message.success('已发布新版本！')
            this.getVersions(this.temp)
        }
      })
    }
  },
    mounted () {
      this.getAppChannel()
  }
}
</script>

<style scoped>
.list {
  padding: 15px;
  padding-top: 5px;
}

.list > li {
  margin: 5px;
  margin-bottom: 15px;
  color: #000;
  font-size: 12px;
  cursor: pointer;
  font-size: 14px;
}
</style>
